require(['./config'], () => {
    require(['template', 'header'], (template, header) => {
        class Shopping {
            constructor() {
                this.renderBag()
                this.bindSelectEvents()
                this.setCheckAllState()
                this.bindChecksChange()
                this.checkAllChange()
                // this.numChange()
                this.totalPrice()
                this.del()
            }
            // 渲染购物袋
            renderBag() {
                // 把localStorage取出来，渲染tbody 
                const bag = localStorage.getItem('bag')
                if (bag) {
                    this.bag = JSON.parse(bag)
                    $('#shop-cont').html(template('srcShop', { bag: this.bag }))
                } else {
                    // 购物车为空，显示购物车为空的界面
                }
                this.del()
            }
            // 设置全选
            setCheckAllState() {
                // 如果bag的所有数据都是check为true，那么全选checked属性也为true
                $('#all-check').prop('checked', this.bag.every(shop => {
                    return shop.check
                }))
            }
            // 单选状态改变
            bindChecksChange() {
                const _this = this //把外层this用一个常量存起来
                $('#shop-cont .check').on('change', function () {
                    // 单选属性修改 也要把localStorage当前的状态修改
                    const id = $(this).parents('tr').attr('data-id')
                    // 根据id修改this.bag里面的数据
                    _this.bag = _this.bag.map(shop => {
                        if (shop.id === id) shop.check = $(this).prop('checked')
                        return shop
                    })
                    // 把修改好的bag存localStorage
                    localStorage.setItem('bag', JSON.stringify(_this.bag))
                    _this.setCheckAllState()
                    _this.totalPrice()
                })
            }
            // 全选状态改变
            checkAllChange() {
                const _this = this //把外层this用一个常量存起来
                $('#all-check').on('change', function () {
                    const all = $(this).prop('checked')
                    _this.bag = _this.bag.map(shop => {
                        shop.check = all
                        return shop
                    })
                    $('#shop-cont .check').prop('checked', all)
                    console.log($('#all-check').prop('checked'))
                    // 把修改好的bag存localStorage
                    localStorage.setItem('bag', JSON.stringify(_this.bag))
                })
                _this.totalPrice()
            }
            // 数量改变
            // numChange() {
            //     const _this = this //把外层this用一个常量存起来
            //     $('.dropdown-txt').on('change', function () {
            //         const id = $('tr').attr('data-id')
            //         // 根据id修改this.bag里面的数据
            //         _this.bag = _this.bag.map(shop => {
            //             if (shop.id === id) {
            //                 shop.num = $('.dropdown-txt').text()
            //             }
            //             return shop
            //         })
            //         $('.dropdown-txt').text(shop.num)
            //         // 把修改好的bag存localStorage
            //         localStorage.setItem('bag', JSON.stringify(_this.bag))
            //     })
            // }


            // const id = $(this).parents('tr').attr('data-id')
            // console.log(id)


            // 下拉选择框
            bindSelectEvents() {
                const _this = this
                $('.dropdown-icon').on('click', () => {
                    const id = $('.dropdown-icon').parents('tr').attr('data-id')
                    this.bag = this.bag.map(shop => {
                        if (shop.id === id) {
                            console.log(id)
                            console.log(shop.id === id)
                            $('.dropdown-icon').css({ 'transform': 'rotate(180deg)' })
                            $('.pull-down').show()
                            $(".pull-down li").each(function () {
                                $(this).on('click', () => {
                                    $('.number .dropdown-txt').html($(this).text())
                                    $('.dropdown-icon').css({ 'transform': 'rotate(0deg)' })
                                    setTimeout(function () {
                                        $('.pull-down').hide()
                                    }, 10)
                                })
                            })
                            $('.number').on('mouseleave', () => {
                                $('.pull-down').hide()
                                $('.dropdown-icon').css({ 'transform': 'rotate(0deg)' })
                            })
                        }
                        return shop
                    })
                })

            }
            // 订单总价
            totalPrice() {
                $(".cart-price p span").html(this.bag.reduce((price, shop) => {
                    if (shop.check) {
                        price += shop.price * shop.num
                    }
                    return price
                }, 0).toFixed(2))
            }

            // 删除功能
            del() {
                const _this = this
                $('.del').on('click', function () {
                    const id = $(this).parents('tr').attr('data-id')
                    _this.bag.map((shop, item) => {
                        if (shop.id === id) {
                            _this.bag.splice(item, 1)
                        }
                        return shop
                    })
                    // 把修改好的bag存localStorage
                    localStorage.setItem('bag', JSON.stringify(_this.bag))
                    _this.renderBag()
                    _this.bindChecksChange()
                    _this.setCheckAllState()
                    _this.totalPrice()
                })
            }
        }
        new Shopping()
    })
})